import React, { Component } from 'react'
import { withRouter } from "react-router-dom"
import { Tabs, WhiteSpace, Badge, Toast } from 'antd-mobile';
import { NavBar, Icon, Popover } from 'antd-mobile';
import "./login.css"
import axios from "axios"
const Item = Popover.Item;

const tabs = [
  { title: <Badge >美团账号登录</Badge> },
  { title: <Badge >手机验证码登录</Badge> },

];
export default class Login extends Component {
  state = {
    visible: false,
    selected: '',

    account: "",
    password: "",

  };
  handleSubmit = (params) => {

    axios.post("http://s.linweiqin.com/api/s/loginCheck", {
      username: this.state.account,
      password: this.state.password,
    }).then(res => {

      console.log(res);

      Toast.info(res.data.msg,1,()=>{
        if(res.data.status === 0){
          this.props.history.push('/my')
        }
      })

    })
  }
  handleAccountChange = (e) => {//受控表单
    this.setState({
      account: e.target.value
    })
  }
  handlePasswordChang = (e) => {//受控表单
    this.setState({
      password: e.target.value
    })
  }



  //点击返回
  handleBackClick = (params) => {
    // this.props.history.go(-1)
    window.history.go(-1)
  }
  // 
  onSelect = (opt) => {
    // console.log(opt.props.value);
    this.setState({
      visible: false,
      selected: opt.props.value,
    });
  };

  handleVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };
  goToHome = (params) => {
    this.props.history.push("/")
  };
  goToBangDan = (params) => {
    this.props.history.push("/bangDan")
  }
  goToReDian = (params) => {
    this.props.history.push("/reDian")
  }
  goToRegister = (params) => {
    this.props.history.push("/Register")
  }


  render() {
    return (
      <div>
        <NavBar className="NavBar"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}
          rightContent={<Popover
            overlayClassName="fortest"
            overlayStyle={{ color: 'currentColor' }}
            visible={this.state.visible}
            overlay={[
              (<Item key="4" value="scan" data-seed="logId"><span onClick={this.goToHome}>首页</span></Item>),
              (<Item key="5" value="special" style={{ whiteSpace: 'nowrap' }}><span onClick={this.goToBangDan}>榜单</span></Item>),
              (<Item key="6" value="button ct" ><span onClick={this.goToReDian} style={{ marginRight: 5 }}>热点</span></Item>),
            ]}
            align={{
              overflow: { adjustY: 0, adjustX: 0 },
              offset: [-10, 0],
            }}
            onVisibleChange={this.handleVisibleChange}
            onSelect={this.onSelect}
          >
            <div style={{
              height: '100%',
              padding: '0 15px',
              marginRight: '-15px',
              display: 'flex',
              alignItems: 'center',
            }}
            >
              <Icon type="ellipsis" />
            </div>
          </Popover>}
        >猫眼电影登入</NavBar>
        <div className="login-tabs">
          <Tabs tabs={tabs}
            initialPage={0}
            onChange={(tab, index) => { console.log('onChange', index, tab); }}
            onTabClick={(tab, index) => {  }}
            // tabBarActiveTextColor={{red}}
            tabBarActiveTextColor={'#e54847'}//加一个大括号就好了
            tabBarTextStyle={{color:"blue"}}
            tabBarUnderlineStyle={{borderColor:"#e54847"}}
          
          >
            <div className="meituan">
              <label htmlFor="account">
                <input type="text"
                  name=""
                  id="account"
                  placeholder="账号名/手机号/Email"
                  className="zhanghao"
                  value={this.state.account}
                  onChange={this.handleAccountChange}
                />

              </label>
              <label htmlFor="password">
                <input type="password"
                  id="password"
                  placeholder="请输入您的密码 "
                  className="password"
                  value={this.state.password}
                  onChange={this.handlePasswordChang}//onChange事件
                />
              </label>
              <div className="login">
                <div className="login-but" onClick={this.handleSubmit}>
                  <p>登录</p>
                </div>
              </div>
              <div className="zhuce">
                <span onClick={this.goToRegister}>注册</span>
                <span>忘记密码</span>
              </div>
              <div className="login-foot">
                <span style={{ fontSize: "14px" }}>
                  @猫眼电影 客服电话：<span style={{ color: "red" }}>400-670-5335</span>
                </span>


              </div>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
              Content of second tab
      </div>

          </Tabs>

        </div>

      </div>
    )
  }
}
